<template>
  <div>
     <!-- 顶部导航栏 -->
     <DetailTopNav></DetailTopNav>
     <scroll ref='scroll' :probe-type="2" @scroll="detailscroll">
       <div class="content" >
         <!-- 轮播图 -->
         <swiper ref="mySwiper" :options="swiperOptions" class="swiper" >
             <swiper-slide v-for="(item,index) in swiperList" :key="index" class="swiperitem">
               <img width="100%vw" :src="item">
             </swiper-slide>
         </swiper>
         <!-- 商品信息 -->
         <DetailGoodsInfo :goods="goods" ></DetailGoodsInfo>
         <!-- 店铺信息 -->
         <DetailShopInfo :shop="shop"></DetailShopInfo>
         <!-- 商品介绍 -->
         <DetailGoodsDetail :goodsdetail="goodsdetail" ref="goods"></DetailGoodsDetail>
         <!-- 商品参数 -->
         <DetailGoodsParams :paramInfo="paramInfo" ref="params"></DetailGoodsParams>
         <!-- 用户评价 -->
         <DetailCommentInfo :commentInfo="commentInfo" ref="comment"></DetailCommentInfo>
         <!-- 推荐区域 -->
         <DetailRecommend :recommendlist="recommendlist" ref="recommend"></DetailRecommend>
       </div>
     </scroll>
     <!-- 加入购物车 -->
     <AddCart @addToCart="addToCart"></AddCart>
     <!-- 返回顶部 -->
     <BackTop @backtop="backtop" v-show="isShowBackTop"></BackTop>
     <!-- 弹出提示框 -->
     <Toast :message="message" v-show="toastIsShow"></Toast>
  </div>
</template>

<script>

// 导入子组件
import DetailTopNav from './ChildComponents/detailtopnav.vue'
import DetailGoodsInfo from './ChildComponents/detailgoodsinfo.vue'
import DetailShopInfo from './ChildComponents/detailshopinfo.vue'
import DetailGoodsDetail from './ChildComponents/detailgoodsdetail.vue'
import DetailGoodsParams from './ChildComponents/detailgoodsparams'
import DetailCommentInfo from './ChildComponents/detailcommentinfo'
import DetailRecommend from './ChildComponents/detailrecommend.vue'
import AddCart from './ChildComponents/addcart.vue'
import BackTop from 'components/backtop/backtop.vue'
import Toast from 'components/toast/toast.vue'
// 轮播图插件
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

// bs滚动插件
import scroll from 'components/scroll/scroll.vue'
// 导入网络请求
import { getdetail, Goods, Shop, GoodsParam, getRecommend } from 'network/detail.js'
// 导入防抖函数
import { debounce } from 'common/utils.js'

export default {
  name: 'detail',
  data() {
    return {
      // 当前商品的编号
      iid: '',
      // 轮播图图片
      swiperList: [],
      // 轮播插件的配置对象
      swiperOptions: {
        // 自动播放 延迟3000ms
        autoplay: true,
        // 循环播放
        loop: true,
        // 拖动临界值
        threshold: 30
      },
      // 商品信息数据
      goods: {},
      // 店铺信息
      shop: {},
      // 商品介绍
      goodsdetail: {},
      // 商品参数
      paramInfo: {},
      // 用户评论
      commentInfo: {},
      // 推荐商品列表
      recommendlist: [],
      // backtop 是否显示
      isShowBackTop: false,
      // 当前Y轴滚动距离
      scrollY: 0,
      // 对应 参数、评论、推荐的y轴位置数据
      tops: [],
      // 当前对应的区域
      currentIndex: 0,
      // toast内显示的文字
      message: '',
      // toast是否显示
      toastIsShow: false
    }
  },
  components: {
    DetailTopNav,
    Swiper,
    SwiperSlide,
    scroll,
    DetailGoodsInfo,
    DetailShopInfo,
    DetailGoodsDetail,
    DetailGoodsParams,
    DetailCommentInfo,
    DetailRecommend,
    AddCart,
    BackTop,
    Toast
  },
  directives: {
    swiper: directive
  },
  methods: {
    // 从vue-router中获取到当前商品的iid
    // 通过iid获取到当前页面商品的数据
    getGoodsinfo() {
      let iid = this.$route.query.iid
      this.iid = iid
      getdetail(iid).then(res => {
        // 提取全部数据
        const data = res.data.result
        this.swiperList = data.itemInfo.topImages
        // 使用构造函数的方法创建新对象，这个对象对应着商品数据
        this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        // 使用构造函数的方法创建新对象，这个对象对应着店铺信息
        this.shop = new Shop(data.shopInfo)
        // 获取商品详细信息
        this.goodsdetail = data.detailInfo
        // 使用构造函数的方法创建新对象，这个对象对应着参数信息
        this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
        // 获取评论信息
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
      })
    },
    // 获取到推荐列表数据
    getRecommend() {
      getRecommend().then(res => {
        let result = res.data
        this.recommendlist = result.data.list
      })
    },
    // 返回页面顶端
    backtop() {
      this.$refs.scroll.scrollTo(0, 0, 1000)
      this.$refs.scroll.refresh()
      this.isShowBackTop = false
    },
    // 监听页面滚动
    detailscroll(postiton) {
      this.isShowBackTop = -postiton.y > 1000
      this.listentop(-postiton.y)
      console.log(this.currentIndex)
    },
    // 获取模块的offsetTop值
    getTop() {
      // 清空数据
      this.tops = []
      this.tops.push(this.$refs.goods.$el.offsetTop)
      this.tops.push(this.$refs.params.$el.offsetTop)
      this.tops.push(this.$refs.comment.$el.offsetTop)
      this.tops.push(this.$refs.recommend.$el.offsetTop)
      this.tops.push(Number.MAX_VALUE)
    },
    // 顶部tab栏点击事件
    tabbarClick(index) {
      this.currentIndex = index
      this.$refs.scroll.scrollTo(0, -this.tops[this.currentIndex], 1000)
    },
    // 判断当前滚动到了那个index
    listentop(topposition) {
      let length = this.tops.length
      for (let i =0; i< length; i++) {
        let pos = this.tops[i]
        if (topposition >= pos && topposition < this.tops[i+1]) {
          if (this.currentIndex !== i) {
            this.currentIndex = i
          }
          break;
        }
      }
      this.$bus.$emit('changeindex', this.currentIndex)
    },
    // 添加购物车操作
    addToCart() {
      // 1.创建对象
      const obj = {}
      // 2.对象信息
      obj.iid = this.iid;
      obj.imgURL = this.swiperList[0]
      obj.title = this.goods.title
      obj.desc = this.goods.desc
      obj.nowPrice = this.goods.nowPrice
      this.$store.dispatch('addCart', obj).then(res => {
        this.toastIsShow = true
        this.message = res
        setTimeout(() => {
          this.toastIsShow = false
          this.message = ''
        }, 1500)
      })
    }
  },
  created() {
    this.getGoodsinfo()
    this.getRecommend()
    this.$bus.$on('tabbarClick', (i) => {
      console.log(i)
      this.tabbarClick(i)
      this.currentIndex = i
    })
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 800);
    const get = debounce(this.getTop, 800);
    this.ItemListener = () => {
      refresh()
      get()
    };
    this.$bus.$on('imageLoad', this.ItemListener)
  },
  destroyed() {
    this.$bus.$off('imageLoad')
    this.$bus.$off('tabbarClick')
  },
}
</script>

<style lang="stylus" scoped>
.wrapper
  height 470px
  overflow hidden
  .swiper
    height 320px
</style>